<template>
  <el-scrollbar height="100%">
    <el-card style="margin: 20px;height: 500px">
      <el-row :gutter="30">
        <el-col :span="14">
          <video :src="BASE_URL + url"
                 style="width: 100%;height: 400px;margin-top: 25px;"
                 controls/>
        </el-col>
        <el-col :span="10">
          <div style="overflow: hidden">
            <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
            <div style="float: left;margin-left: 10px">
              <span style="color: #2d3d57;font-size: 20px;font-weight: bold;">火热来袭</span>
            </div>
          </div>
          <div style="margin-top: 10px">
            <el-scrollbar height="400px">
              <div style="width: 98%">
                <el-row :gutter="10">
                  <el-col :span="24" style="margin-top: 10px;"
                          @click="changeVideoUrl(item.videoUrl)"
                          :title=" item.title"
                          v-for="item in homePreviewData">
                    <el-row :gutter="10">
                      <el-col :span="11">
                        <div style="position: relative">
                          <el-image :src="BASE_URL + item.thumbnail"
                                    style="width: 200px;height: 115px;"
                                    alt="Film poster"/>
                          <div class="mask"></div>
                          <div class="mask-text">
                            <p>{{ item.minute }} : {{ item.second }}</p>
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="13">
                        <div style="	width: 100%;
                            overflow: hidden;text-overflow: ellipsis;	display: -webkit-box;
	                              	-webkit-line-clamp: 1;	-webkit-box-orient: vertical;">
                          <p style="font-weight: bold;line-height: 115px;margin: 0;">{{ item.title }}</p>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </el-scrollbar>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin: 20px;height: 720px">
      <div style="margin:10px 0 40px 10px;">
        用户端预告片展示列表
        <el-button type="success" style="float: right;margin-top:-3px;"
                   @click="addPreview"
                   v-if="homePreviewData.length < 5"
        >添加
        </el-button>
      </div>
      <el-table :data="homePreviewData" style="width: 100%" height="600px">
        <el-table-column type="index" label="编号" width="80" align="center"/>
        <el-table-column prop="title" label="标题" align="center"/>
        <el-table-column prop="thumbnail" label="缩略图" align="center">
          <template #default="scope">
            <el-image :src="BASE_URL + scope.row.thumbnail"
                      style="width: 200px;height: 115px;"
                      alt="Film poster"/>
          </template>
        </el-table-column>
        <el-table-column prop="videoUrl" label="视频地址" align="center">
          <template #default="scope">
            <video :src="BASE_URL + scope.row.videoUrl"
                   style="width: 200px;height: 115px;"
                   controls/>
          </template>
        </el-table-column>
        <el-table-column prop="minute" label="时长" align="center">
          <template #default="scope">
            {{ scope.row.minute }} : {{ scope.row.second }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary"
            @click="editPreview(scope.row.id)">编辑
            </el-button>
            <el-button link type="danger"
            @click="deletePreview(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-scrollbar>

  <el-dialog :title="addUserPreviewTitle"
             v-model="addUserPreviewVisible"
             style="width:600px; padding:40px;">
    <el-form label-width="100">
      <el-form-item label="预告片">
        <el-select v-model="saveFrom.previewId" placeholder="请选择">
          <el-option
              v-for="item in previewData"
              :label="item.title"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="saveFrom.sort" placeholder="请输入排序"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="savePreview">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";

const url = ref('');
const homePreviewData = ref([]);
const search = () => {
  axios.get(BASE_URL + '/v1/previewSort/select/').then((response) => {
    if (response.data.code === 2000) {
      homePreviewData.value = response.data.data;
      console.log(homePreviewData.value);
      url.value = response.data.data[0].videoUrl;
    } else {
      ElMessage({
        message: response.data.msg,
        type: 'error',
        showClose: true,
        center: true,
      });
    }
  })
}
onMounted(() => {
  search();
})
const changeVideoUrl = (videoUrl) => {
  url.value = videoUrl;
}
const addUserPreviewVisible = ref(false);
const addUserPreviewTitle = ref('添加预告片');
const addPreview = () => {
  addUserPreviewVisible.value = true;
}
const previewData = ref([]);
const getPreview = () => {
  axios.get(BASE_URL + '/v1/preview/select?').then((response) => {
    if (response.data.code === 2000) {
      previewData.value = response.data.data;
    } else {
      ElMessage({
        message: response.data.msg,
        type: 'error',
        showClose: true,
        center: true,
      });
    }
  })
}
onMounted(() => {
  getPreview()
})
const saveFrom = ref({
  previewId: '',
  sort: '',
})
const savePreview = () => {
  if (saveFrom.value.previewId === '') {
    errorInfo('预告片不能为空')
    return;
  }
  if (saveFrom.value.sort === '') {
    errorInfo('排序不能为空')
    return;
  }
  let data = qs.stringify(saveFrom.value);
  axios.post(BASE_URL + '/v1/previewSort/save' , data).then((response) => {
    if (response.data.code === 2000) {
      OKInfo('保存成功')
      addUserPreviewVisible.value = false;
      search();
    } else {
      ElMessage({
        message: response.data.msg,
        type: 'error',
        showClose: true,
        center: true,
      });
    }
  })
}
const cancel = () => {
 ElMessageBox.confirm('确定取消吗？', '提示', {
   customClass: 'custom-message-box',
   confirmButtonText: '确定',
   cancelButtonText: '取消',
   type: 'warning',
 }).then(() => {
   addUserPreviewVisible.value = false;
   saveFrom.value = {
     previewId: '',
     sort: ''
   }
   Info('已取消')
 }).catch(() => {

 });
}
const editPreview = (id) => {
  addUserPreviewTitle.value = '编辑信息';
  addUserPreviewVisible.value = true;
  axios.get(BASE_URL + '/v1/previewSort/select?id=' + id).then((response) => {
    if (response.data.code === 2000) {
      saveFrom.value = response.data.data[0];
      addUserPreviewVisible.value = true;
    } else {
      ElMessage({
        message: response.data.msg,
        type: 'error',
        showClose: true,
        center: true,
      })
    }
  })
}
const deletePreview = (id) => {
  ElMessageBox.confirm('确定删除吗？', '提示', {
    customClass: 'custom-message-box',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    axios.delete(BASE_URL + '/v1/previewSort/delete/' + id).then((response) => {
      if (response.data.code === 2000) {
        OKInfo('删除成功')
        search();
      } else {
        ElMessage({
          message: response.data.msg,
          type: 'error',
          showClose: true,
          center: true,
        });
      }
    })
  }).catch(() => {

  });
}
</script>

<style scoped>
.mask {
  width: 200px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(360deg, #0f1827 10%, rgba(15, 24, 39, 0) 70%);
}

.mask-text {
  position: absolute;
  bottom: 0;
  right: 10px;
  z-index: 2;
  color: #fff;
}
</style>